<!-- 终审 -->
<script lang="ts" setup>
import { ref, reactive, onMounted, shallowRef, watch, toRaw } from 'vue'
import {
  NSpace,
  NButton,
  type FormInst,
  NPagination,
  NFormItem,
  NInput,
  NScrollbar,
  NSpin,
  NDataTable,
  NDatePicker,
  NForm,
  type DataTableColumns
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import UploadFileV2 from '@/views/common/UploadFileV2.vue'
import { keysOf } from '@/utils/object'
import { useRoute } from 'vue-router'
import type { ModelJson } from '@/components/DynamicPageForm/DynamicFormTypes'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import useRouteReplace from '@/hooks/useRouteReplace'
const props = defineProps({
  id: { type: String, default: () => null },
  typeShow: { type: Number, default: () => 0 }, //1初审 2 终审
  code: { type: String, default: () => null },
  idSelf: { type: String, default: () => null }
})
const tableData: any = ref([])
const tableData1 = ref()
const tableData2 = ref() //终审table数据
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const columns: DataTableColumns = [
  {
    title: '序号',
    key: 'itemName',
    width: '5rem',
    align: 'center',
    render: (e: any, row: any) => {
      return 1
    }
  },
  {
    title: '藏品名称',
    key: 'itemName',
    width: '5rem',
    align: 'center'
  },
  {
    title: '馆藏码',
    key: 'assetCode',
    width: '5rem',
    align: 'center'
  },
  {
    title: '流水号',
    key: 'serialNumber',
    width: '10rem',
    align: 'center',
  },
  {
    title: '版本类型',
    key: 'itemTypeName',
    width: '10rem',
    align: 'center'
  },
  {
    title: '入库位置',
    key: 'positionName',
    width: '30rem',
    align: 'center'
  },
 
]
const tableLoading = ref() 
const getTable = async () => {
  tableLoading.value = true
  sendRequest({
    module: 'collectProcess',
    api: 'listItemsPage',
    override: {
      params: {
        limit: paginationReactive.pageSize,
        page: paginationReactive.page,
        orderId: route.query?.id
      }
    }
  }).then(async ([err, res]) => {
    if (err) return
    tableLoading.value = false
    tableData.value = res.data?.list
    paginationReactive.itemCount = res.data?.totalCount
  })
}
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    getTable()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    getTable()
  }
})
const form: any = reactive({
  id: route.query.id,
  collectingOrderEnter:{
    fileIdFiles:[]
  }
})
const goBack = () => {
  routeReplace()
}
const otherJson = ref({} as ModelJson)
const getInfoForm = async()=>{
  sendRequest({
      module: 'collectProcess',
      api: 'orderBaseInfo',
      override: {
        params: {
          id: route.query?.id
        }
      }
    }).then(async ([err, res]) => {
      if (err) return
      keysOf(res.data.collectingOrderEnter).forEach((e) => {
      {
        form.collectingOrderEnter[e] = res.data.collectingOrderEnter[e] as never
      }
    })

      form.collectingOrderEnter.fileIdFiles = res.data?.fileList.map((e: any, i: number)=>{
        const f = new File([e.name], e.name, { type: e.type })
      // @ts-ignore
      f.remoteId = e.id
      return {
        id: i,
        name: e.name,
        file: f,
        status: 'finished',
        url: e.path,
        remoteId: e.id
      }
      })
    })
}

const getFlowFn1 = async() => {
  sendRequest({
    module: 'collectProcess',
    api: 'orderBaseInfo',
    override: {
      params: {
        id: route.query?.id
      }
    }
  }).then(async ([err, res]) => {
    if (err) return
    form.status = res.data?.workflowInfoVo?.status
    form.workflow = res.data?.workflowInfoVo?.workflow
    tableData1.value = res.data?.workflowInfoVo?.approvalRecordsList || []
    form.fromId = res.data?.workflowInfoVo?.fromId
    form.assigneeFlag = res.data?.workflowInfoVo?.assigneeFlag
  })
}

watch(
  () => route.query.id,
  () => {
    if (route.query.id) {
      getInfoForm()
      getTable() 
      getFlowFn1()
    }
  },
  {
    immediate: true
  }
)
const columns1: DataTableColumns = [
  {
    title: '类型',
    key: 'type',
    width: 50
  },
  {
    title: '人员',
    key: 'userName',
    width: 50
  },
  {
    title: '时间',
    key: 'time',
    width: 100
  },
  {
    title: '结果',
    key: 'result',
    width: 50
  },
  {
    title: '备注',
    key: 'remark',
    width: 150
  }
]
</script>

<template>
  <DetailFormProvider>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="false">
          <div class="content">
            <VDisOrEnd
              :id="form?.fromId"
              v-if="$route.query.flat"
              :assigneeFlag="form?.assigneeFlag"
              title="入库审核单"
            ></VDisOrEnd>
            <div class="topTitle">基本信息</div>
                <DetailFormProvider>
                  <!-- 出库单 1-->
                  <NForm
                    :model="form"
                    class="bd-card"
                    ref="baseFormRef"
                    label-placement="left"
                    require-mark-placement="left"
                    label-width="140"
                    disabled
                  >
                    <NSpace>
                      <NFormItem
                        label="入库日期："
                        path="collectingOrderEnter.enterDate"
                      >
                        <NDatePicker
                          placeholder="请选择入库日期"
                          type="date"
                          value-format="yyyy-MM-dd"
                          v-model:formatted-value="form.collectingOrderEnter.enterDate"
                          :input-readonly="true"
                          class="inputWH"
                          clearable
                        />
                      </NFormItem>
                      <NFormItem
                        label="移交人："
                        path="collectingOrderEnter.transferUser"
                      >
                        <NInput
                          placeholder="请输入移交人"
                          v-model:value="form.collectingOrderEnter.transferUser"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="接收人："
                        path="collectingOrderEnter.receiveUser"
                      >
                        <NInput
                          placeholder="请输入接收人"
                          v-model:value="form.collectingOrderEnter.receiveUser"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="保管适宜温度："
                        path="collectingOrderEnter.temperature"
                      >
                        <NInput
                          placeholder="请输入保管适宜温度"
                          v-model:value="form.collectingOrderEnter.temperature"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管相对湿度："
                        path="collectingOrderEnter.humidity"
                      >
                        <NInput
                          placeholder="请输入保管相对湿度"
                          v-model:value="form.collectingOrderEnter.humidity"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管注意事项："
                        path="collectingOrderEnter.notes"
                      >
                        <NInput
                          placeholder="请输入保管注意事项"
                          v-model:value="form.collectingOrderEnter.notes"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="备注："
                        path="collectingOrderEnter.remark"
                      >
                        <NInput
                          placeholder="请输入备注"
                          v-model:value="form.collectingOrderEnter.remark"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="附件："
                        path="collectingOrderEnter.fileIds"
                      >
                        <UploadFileV2
                          :file-list="form.collectingOrderEnter.fileIdFiles"
                          :disabled='false'
                        >
                          <!-- <template #trigger="{ handleClick }">
                            <n-button
                              @click="handleClick"
                              color="#6CB187"
                              ghost
                              size="small"
                            >
                              点击上传
                            </n-button>
                          </template> -->
                        </UploadFileV2>
                      </NFormItem>
                    </NSpace>
                  </NForm>
                </DetailFormProvider>
              <NSpace
                justify="space-between"
                style="margin-top: 20rem"
              >
                <div class="topTitle">藏品信息</div>
              </NSpace>
              <div class="table" style="margin-bottom: 10px;">
                <NDataTable
                  v-bind="props"
                  :bordered="false"
                  :columns="columns"
                  :data="tableData"
                />
              </div>
              <NPagination
                show-size-picker
                show-quick-jumper
                :page-sizes="paginationReactive.pageSizes"
                :item-count="paginationReactive.itemCount"
                :page="paginationReactive.page"
                :page-size="paginationReactive.pageSize"
                @update:page="paginationReactive.onChange"
                @update:page-size="paginationReactive.onUpdatePageSize"
                :suffix="() => '页'"
              >
                <template #prefix>
                  <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
                </template>
              </NPagination>
            <div>
              <div class="topTitle" style='margin-top:10px'>审批信息</div>
              <div class="approve">
                <div class="box">
                  <span>审批状态</span>
                  <span>{{ form?.status }}</span>
                </div>
                <div class="box">
                  <span>审批流程</span>
                  <span>{{ form?.workflow || '--' }}</span>
                </div>
              </div>
              <div class="topTitle">审批记录</div>
              <div class="table">
                <NDataTable
                  :bordered="false"
                  :columns="columns1"
                  :data="tableData1"
                  :pagination="false"
                  striped
                />
              </div>
            </div>
            
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
</DetailFormProvider>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        取消
      </NButton>
    </NSpace>
  </FixedAction>
</template>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .dynamic-form-demo {
    background-color: #e1e1e1;
    padding: 30px 45px 10px;
    // height:300px;
  }
  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .inputWH {
      width: 300rem;
    }

    .inputWHmin {
      width: 150rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;
    }
  }

  .approve {
    display: flex;
    width: 100%;
    margin-bottom: 20rem;
    border-bottom: 1px dashed #bc9e70;

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 100rem;
      width: auto;
      height: 90rem;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      padding: 12rem;
      margin-right: 10rem;
      margin-bottom: 20rem;

      span:first-child {
        font-size: 16rem;
      }

      span:last-child {
        font-weight: 500;
        color: #5fb17f;
      }
    }
  }
}

// .ac-card {
//     padding: 20rem;
//     background-color: #e1e1e1;
//   }

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
